<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>登录</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="css/commontCust.css" />
		<style>
			body {
				/*				background: url(img/login_bg.png) no-repeat;
*/
				background-size: 100%;
				background-color: white;
			}
			
			.language {
				position: fixed;
				top: 20px;
				right: 20px;
			}
			/*中英文切换*/
			
			.lang-zz {
				width: 100%;
				height: 100%;
				background: rgba(255, 255, 255, 0.2);
				position: fixed;
				left: 0px;
				top: 0px;
				z-index: 999;
			}
			
			.lang-main {
				width: 260px;
				height: auto;
				position: fixed;
				background: #aaa;
				left: 50%;
				margin-left: -130px;
				top: 50%;
				margin-top: -25%;
				border-radius: 5px;
			}
			
			.lang-main h5 {
				color: #000;
				font-size: 18px;
				text-align: center;
			}
			
			.langbox {
				width: 100%;
				height: 33px;
				padding: 0px 5%;
				line-height: 33px;
				color: #000;
			}
			
			.langbox span {
				float: right;
				line-height: 33px;
			}
			
			.lang-btn {
				width: 100%;
				height: 40px;
			}
			
			.lang-btn a {
				display: block;
				width: 50%;
				float: left;
				text-align: center;
				line-height: 40px;
				color: #000;
			}
			
			.lang-btn a:hover {
				background: #222;
			}
			/*立体旋转*/
			
			.container {
				width: 50px;
				height: 50px;
				margin-top: -10px;
				position: relative;
				transform: rotateY(15deg) rotateX(-15deg);
				transform-style: preserve-3d;
				animation: xuanzhuan 8s linear infinite;
			}
			
			@keyframes xuanzhuan {
				0% {
					transform: rotateY(15deg) rotateX(45deg);
				}
				50% {
					transform: rotateY(375deg) rotateX(-45deg);
				}
				100% {
					transform: rotateY(735deg) rotateX(45deg);
				}
			}
			
			.container:hover {
				/*当鼠标划上去就停止*/
				/*animation-play-state: paused;*/
			}
			
			.container div.front {
				transform: translateZ(25px);
			}
			
			.container div.back {
				transform: translateZ(-25px) rotateY(180deg);
			}
			
			.container div.left {
				transform: translateX(-25px) rotateY(-90deg);
			}
			
			.container div.right {
				transform: translateX(25px) rotateY(90deg);
			}
			
			.container div.top {
				transform: translateY(-25px) rotateX(90deg);
			}
			
			.container div.bottom {
				transform: translateY(25px) rotateX(-90deg);
			}
			
			.container div {
				position: absolute;
				left: 0;
				top: 0;
				width: 50px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				font-size: 40px;
			}
		</style>
	</head>

	<body>
		<div style="width: 100%;height: 100%;" class="divColumn">

			<div style="width: 100%;height:160px;background: url(img/login_bk.png);background-size: 100% 100%;">
				<div>
					<div class="lang-zz" id="lang-zz" style="display: none;">
						<div class="lang-main">
							<h5 lang>多语言</h5>
							<div class="langbox" data-lang="zh">
								<label>中文</label><span class="mui-icon" id="zh_lang"></span>
							</div>
							<div class="langbox" data-lang="en">
								<label>English</label><span class="mui-icon" id="en_lang"></span>
							</div>
							<div class="lang-btn">
								<a style="color:#eee;" id="quxiao" lang>取消</a>
								<a id="contain" lang>确定</a>
							</div>
						</div>
					</div>
					<div class="mui-pull-right language" id="change_lang">
						<span id="now_langage" style="color:white;font-size:16px;">English</span>
					</div>
				</div>
				<div style="width: 100%;height: 120px;margin-top: 105px;" class="divCenter">
					<div style="width: 120px;height: 120px;background: url(img/login_1.png);background-size: 100% 100%;" class="divCenter">
						<div class="container">
							<div class="front" style="background-image:url(img/logo_d.png);background-size: 100% 100%;"></div>
							<div class="back" style="background-image: url(img/logo_d.png);background-size: 100% 100%;"></div>
							<div class="left" style="background-image: url(img/logo_d.png);background-size: 100% 100%;"></div>
							<div class="right" style="background-image: url(img/logo_d.png);background-size: 100% 100%;"></div>
							<div class="top" style="background-image: url(img/logo_d.png);background-size: 100% 100%;"></div>
							<div class="bottom" style="background-image: url(img/logo_d.png);background-size: 100% 100%;"></div>
						</div>
					</div>

				</div>
			</div>
			<div style="width: 100%;margin-top: 60px;" class="divCenter">
				<img src="img/login_3.png" style="width: 30%;" />
			</div>
			<form>
				<div>
					<div style="margin: 30px 30px;" class="divColumn">
						<div style="width: 100%;height: 52px;" class="divRow divColumnCenter">
							<img src="img/login_4.png" style="width: 6%;" />
							<input style="margin: 0px;padding: 0px;border-width: 0px;font-size: 14px;margin-left: 10px;" placeholder="输入会员手机或ID" lang type="text" id="phone" />
						</div>
						<div style="width: 100%;height: 1px;background: #DDDDDD;"></div>
						<div style="width: 100%;height: 52px;" class="divRow divColumnCenter">
							<img src="img/login_5.png" style="width: 6%;" />
							<input style="margin: 0px;padding: 0px;border-width: 0px;font-size: 14px;margin-left: 10px;" placeholder="登录密码" lang type="password" id="password" />
						</div>
						<div style="width: 100%;height: 1px;background: #DDDDDD;"></div>

						<div style="width: 100%;margin-top: 10px;" class="leftAndRight">
							<a class="regist_l" id='reg' lang>立即注册</a>
							<a class="regist_r" id='forgetPassword' lang>忘记登录密码？</a>

						</div>
						<div style="width: 100%;background: #2860DA;height: 52px;border-radius: 30px;margin-top: 60px;" class="divCenter" id='login'>
							<span style="color:white;font-size: 16px;" lang>登录</span>
						</div>

					</div>

				</div>

			</form>

		</div>
		<!--<div class="mui-content-padded login" style="margin: 5px;">
			<form class="mui-input-group">
				<div class="mui-input-row divColumnCenter" style="height: 50px;">
					<label lang>账号</label>
					<input type="text" id="phone" class="mui-input-clear" placeholder="输入会员手机或ID" lang>
				</div>
				<div class="mui-input-row divColumnCenter" style="height: 50px;">
					<label lang>登录密码</label>
					<input type="password" id="password" class="mui-input-password" lang>
				</div>
				<div class="regist">
					<a class="regist_l" id='reg' lang>立即注册</a>
					<a class="regist_r" id='forgetPassword' lang>忘记登录密码？</a>
				</div>
				<div class="mui-button-row" style="margin-top:30px;">
					<button type="button" class="mui-btn mui-btn-block" id='login' lang>登录</button>&nbsp;&nbsp;
				</div>
			</form>
		</div>-->
		<script src="lang/index.js"></script>
		<script src="js/mui.js"></script>
		<script src="js/config.js"></script>
		<script src="js/common.js"></script>
		<script src="js/sockjs.js"></script>
		<script src="resource/login/login.js"></script>
		<script src="resource/index/update.js"></script>
		<script>
			mui.plusReady(function() {
				plus.navigator.setStatusBarBackground("#2860DA");
			});
		</script>
	</body>

</html>